<template>
  <div class="tip-container">
    <!-- 常见科室 -->
    <div class="department">
      <div class="department-top">
        <div class="department-top-left">
          <SvgIcon name="icon" />
          <span>常见科室</span>
        </div>
        <div class="department-top-right">
          <span>全部</span>
          <SvgIcon name="xiangyoujiantou" width='14px' height='14px' />
        </div>
      </div>
      <div class="department-list">
        <ul>
          <li v-for="item in departmentList" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 平台公告 -->
    <div class="platform-announcements">
      <div class="platform-announcements-top">
        <div class="platform-left">
          <SvgIcon name="pingtaigonggao" />
          <span>平台公告</span>
        </div>
        <div class="platform-right">
          <span>全部</span>
          <SvgIcon name="xiangyoujiantou" width='14px' height='14px' />
        </div>
      </div>
      <div class="platform-announcements-list">
        <ul>
          <li>关于延长xx大学国际医院放假的通知</li>
          <li>xxx大学东方医院不分科室医生门诊</li>
          <li>xxx总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
    <!-- 停诊公告 -->
    <div class="notice-discontinuation">
      <div class="notice-discontinuation-top">
        <div class="notice-left">
          <SvgIcon name="close" />
          <span>停诊公告</span>
        </div>
        <div class="notice-right">
          <span>全部</span>
          <SvgIcon name="xiangyoujiantou" width='14px' height='14px' />
        </div>
      </div>
      <div class="notice-discontinuation-list">
        <ul>
          <li>关于延长xx大学国际医院放假的通知</li>
          <li>xxx大学东方医院不分科室医生门诊</li>
          <li>xxx总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 科室列表
const departmentList = ref([
  { id: 1, name: '神经内科' },
  { id: 2, name: '消化内科' },
  { id: 3, name: '呼吸内科' },
  { id: 4, name: '内科' },
  { id: 5, name: '神经外科' },
  { id: 6, name: '妇科' },
  { id: 7, name: '产科' },
  { id: 8, name: '儿科' }
])
</script>

<style lang="scss" scoped>
// 科室
.department-top {
  display: flex;
  justify-content: space-between;
  .department-top-left, .department-top-right {
    display: flex;
    align-items: center;
  }
  .department-top-left {
    span {
      margin-left: 3px;
    }
  }
}
.department-list {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 50%;
      margin-top: 20px;
      text-align: center;
    }
  }
}
// --------------------
// 平台公告
.platform-announcements {
  margin-top: 20px;
}
.platform-announcements-top {
  display: flex;
  justify-content: space-between;
  .platform-left, .platform-right {
    display: flex;
    align-items: center;
  }
  .platform-left {
    span {
      margin-left: 3px;
    }
  }
}
.platform-announcements-list {
  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 20px;
  }
}
// ----------------------
// 停诊公告
.notice-discontinuation {
  margin-top: 20px;
}
.notice-discontinuation-top {
  display: flex;
  justify-content: space-between;
  .notice-left, .notice-right {
    display: flex;
    align-items: center;
  }
  .notice-left {
    span {
      margin-left: 3px;
    }
  }
}
.notice-discontinuation-list {
  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 20px;
  }
}
</style>
